<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="browsermode" content="application" />
    <meta name="x5-page-mode" content="app" />
    <title>我的银行卡</title>
    <meta charset="utf-8" />
    <link href="../css/main.css?rev=@@hash" rel="stylesheet" />

    <style type="text/css">
        body{
            background: #3276FE;
        }
        .showCardBox {
            width: 3rem;
            margin: 0 auto;
            position: relative;
        }
        .showCard img{
            margin-top: .2rem;
            display: block;
            width: 100%;
        }
        .showCard span {
            position: absolute;
            bottom: .15rem;
            right: .2rem;
            font-size: .12rem;
        }
        .resetBankCardBtn {
            width: 100%;
            height: .6rem;
            line-height: .6rem;
            text-align: center;
            position: absolute;
            bottom: 0;
            background: #fff;
            z-index: 10;
        }
        .resetBankCardBtn img{
            width: .24rem!important;
            margin-bottom: -.07rem;
        }
        .resetBankCardBtn img {
            width: 100%;
        }
        header{
            width: 100%;
            height: .44rem;
            line-height: .44rem;
        }
        header img,
        header span{
             display: inline-block;
             float: left;
        }
        header .backIcon{
            width: .24rem;
            height: .24rem;
            margin: .1rem 0 0 .16rem;
        }
        header .pageTitle{
            width: 80%;
            text-align: center;
            color: #fff;
            font-size: .17rem;
        }
        header .refresh{
            float: right;
            margin-right: .16rem;
            font-size: .14rem;
            color: #fff;
        }
        .cardList ul{
            width: 3.43rem;
            margin: .2rem auto;
        }
        .cardList li{
            height: .9rem;
            background: #fff;
            border-radius: .14rem;
            box-shadow: 0 0 13px #1045AF;
            margin-bottom: .2rem;
        }
        .cardIco,.cardSetIco,.cardInfo{
            float: left;
        }
       .cardIco {
            width:.4rem;
            height:.4rem;
            margin:.25rem .1rem 0 .16rem;

        }
        .cardSetIco{
            float: right;
            height: .22rem;
            margin: .35rem .35rem 0 0;
        }
        .cardInfo{
            margin-top: .28rem;
        }
        .cardNumer{
            height: .2rem; 
            font-size: .17rem;
            font-weight: bold;
            color: #1F1F1F;
            margin-bottom: .05rem;
        }
    </style>
</head>
<body>
        <!--<header>
                <a href="myWallet.html"><img class="backIcon" src="../img/backIcon.png" /></a>
                <span class="pageTitle">我的银行卡</span>
                <span class="refresh"></span>
        </header>-->
        <section class="cardList">
            <ul>
                <!--<li>
                    <img class="cardIco" src="../img/bankIco.png" />
                    <div class="cardInfo">
                       <div class="cardNumer">**** **** **** 8989</div>
                       <div>中国建设银行</div>
                    </div>
                    <img class="cardSetIco" src="../img/setIcon.png" />
                </li>
                <li>
                        <img class="cardIco" src="../img/bankIco.png" />
                        <div class="cardInfo">
                           <div class="cardNumer">**** **** **** 8989</div>
                           <div>中国建设银行</div>
                        </div>
                        <img class="cardSetIco" src="../img/setIcon.png" />
                </li>
                <li>
                        <img class="cardIco" src="../img/bankIco.png" />
                        <div class="cardInfo">
                            <div class="cardNumer">**** **** **** 8989</div>
                            <div>中国建设银行</div>
                        </div>
                        <img class="cardSetIco" src="../img/setIcon.png" />
                </li>                                    -->
            </ul>
        </section>
        <div class="alert11" style="display: none;">
                <div class='layer_mask'></div>
                <div class="repayAlert1">
                        <div class="resetBankCardBtn">
                            <a href="../trust/changebindCard.html">
                                <img src="../img/myCard.png" />
                                更换银行卡信息
                            </a>
                        </div>
                </div>
        </div>
</body>
    <!-- 脚本 -->
    <script src="../lib/zepto.min.js?rev=@@hash"></script>
    <script src="../js/main.js?rev=@@hash"></script>
    <script type="text/javascript">
        !function(global,userUtil,layer,dataUtil){
            var sessionId=userUtil.sid();
            if(sessionId){


                //初始化银行卡信息
                function onlineRepay(){
                    var _data={
                        "sessionId": sessionId
                    }
                    $.ajax({
                        url: global.localUrl + "wallet/userBankList",
                        type: "post",
                        data: JSON.stringify(_data),
                        contentType: 'application/json;charset=utf-8',
                        success: function (re) {
                        	var $html;
                            if (1 == re.code) {
                                if(!re.data[0]){
                                    layer.tips("未获取到绑定的银行卡信息");
                                    setTimeout(function(){
                                        //window.location.href=global.localUrl +"index.html";
                                    },2000);
                                }else {
                                	$.each(re.data, function(i) {
                                		var bankNo = re.data[i].bankNumberNo;
                                			bankNo = re.data[i].bankNumberNo.substring(re.data[i].bankNumberNo.length,re.data[i].bankNumberNo.length-3);
	                                    $html ='<li> <img class="cardIco" />'
											+'<div class="cardInfo">'
											+'<div class="cardNumer"><sub class="hidNo">**** **** **** </s>'+bankNo+'</div>'
											+'<div>中国'+re.data[i].bankName+'</div></div>'
											+'<img class="cardSetIco" src="../img/setIcon.png" /></li>'
	                                    $('.cardList ul').append($html);
											switch(re.data[i].bankId){
												case '22': $('.cardIco').attr('src','../img/bankIco/bank22.png');break;
                                                case '23': $('.cardIco').attr('src','../img/bankIco/bank23.png');break;
                                                case '24': $('.cardIco').attr('src','../img/bankIco/bank24.png');break;
                                                case '25': $('.cardIco').attr('src','../img/bankIco/bank25.png');break;
                                                case '26': $('.cardIco').attr('src','../img/bankIco/bank26.png');break;
                                                case '27': $('.cardIco').attr('src','../img/bankIco/bank27.png');break;
                                                case '28': $('.cardIco').attr('src','../img/bankIco/bank28.png');break;
                                                case '30': $('.cardIco').attr('src','../img/bankIco/bank30.png');break;
                                                case '31': $('.cardIco').attr('src','../img/bankIco/bank31.png');break;
                                                case '32': $('.cardIco').attr('src','../img/bankIco/bank32.png');break;
                                                case '33': $('.cardIco').attr('src','../img/bankIco/bank33.png');break;
                                                case '34': $('.cardIco').attr('src','../img/bankIco/bank34.png');break;
                                                case '35': $('.cardIco').attr('src','../img/bankIco/bank35.png');break;
											}	                                    
                                	});
					                $('.cardSetIco').on('click',function(){
					                    $('.alert11').css('display','block');
					                })
					                $('.layer_mask').on('click',function(){
					                    $('.alert11').css('display','none');
					                })
                                }
                            }
                            else{
                                layer.tips(re.message);
                            }
                        },
                        error: function () {
                            layer.tips(global.netError);
                        }
                    });
                }
                onlineRepay();

            }else {
                 //window.location.href=global.localUrl+"user/login.html";
                window.location.href = "login.html";
            }
        }(global,userUtil,layer,dataUtil)
    </script>
</html>
